<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{ profile.username }}</h4>
            <p>
              {{ profile.bio }}
            </p>
            <button
              class="btn btn-sm btn-outline-secondary action-btn"
              :class="{ active: profile.following }"
              @click="onFollow()"
            >
              <i class="ion-plus-round"></i>
              &nbsp; {{ profile.following ? 'Unfollow' : 'Follow' }} {{ profile.username }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <div class="nav-link" :class="{ active: userArticlesTab }" @click="userArticlesTab = true">
                  My Articles
                </div>
              </li>
              <li class="nav-item">
                <div class="nav-link" :class="{ active: !userArticlesTab }" @click="getUserFavoritedArticles()">
                  Favorited Articles
                </div>
              </li>
            </ul>
          </div>

          <div v-if="userArticlesTab">
            <div class="article-preview" v-for="article in userArticles" :key="article.slug">
              <div class="article-meta">
                <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }">
                  <img :src="article.author.image" />
                </nuxt-link>
                <div class="info">
                  <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }" class="author">
                    {{ article.author.username }}
                  </nuxt-link>
                  <span class="date">{{ article.createdAt | date('MM DD, YYYY') }}</span>
                </div>
                <button class="btn btn-outline-primary btn-sm pull-xs-right">
                  <i class="ion-heart"></i>
                  {{ article.favoritesCount }}
                </button>
              </div>
              <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }" class="preview-link">
                <h1>{{ article.title }}</h1>
                <p>{{ article.description }}</p>
                <span>Read more...</span>
              </nuxt-link>
            </div>
          </div>

          <div v-else>
            <div class="article-preview" v-for="article in userFavoritedArticles" :key="article.slug">
              <div class="article-meta">
                <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }">
                  <img :src="article.author.image" />
                </nuxt-link>
                <div class="info">
                  <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }" class="author">
                    {{ article.author.username }}
                  </nuxt-link>
                  <span class="date">{{ article.createdAt | date('MM DD, YYYY') }}</span>
                </div>
                <button class="btn btn-outline-primary btn-sm pull-xs-right">
                  <i class="ion-heart"></i>
                  {{ article.favoritesCount }}
                </button>
              </div>
              <nuxt-link :to="{ name: 'article', params: { slug: article.slug } }" class="preview-link">
                <h1>{{ article.title }}</h1>
                <p>{{ article.description }}</p>
                <span>Read more...</span>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProfile, followUser, unfollowUser } from '@/api/user';
import { getArticles } from '@/api/article';
import { mapState } from 'vuex';
export default {
  middleware: 'authenticated',
  name: 'UserProfile',
  data() {
    return {
      profile: {},
      page: 1,
      limit: 20,
      userArticles: [],
      userFavoritedArticles: [],
      userArticlesCount: null,
      userFavoritedArticlesCount: null,
      userArticlesTab: true,
    };
  },
  async mounted() {
    const { page, limit } = this;
    const username = this.user.username;
    const [userProfile, userArticles] = await Promise.all([
      getProfile(username),
      getArticles({ author: username, limit, offset: (page - 1) * limit }),
    ]);
    this.profile = userProfile.data.profile;
    const { articles, articlesCount } = userArticles.data;
    this.userArticles = articles;
    this.userArticlesCount = articlesCount;
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    async onFollow() {
      let { following, username } = this.profile;
      if (following) {
        await unfollowUser(username);
        this.profile.following = false;
      } else {
        await followUser(username);
        this.profile.following = true;
      }
    },

    async getUserFavoritedArticles() {
      const { page, limit } = this;
      const username = this.user.username;

      const { data: articles } = await getArticles({
        favorited: username,
        limit,
        offset: (page - 1) * limit,
      });
      this.userFavoritedArticles = articles.articles;
      this.userFavoritedArticlesCount = articles.articlesCount;
      this.userArticlesTab = false;
    },
  },
};
</script>

<style></style>
